<template>
  <div class="icon">
   <ul>
       <li @click="VIP">
           <img src="./../../assets/zhy/images/icon0.png" alt="">
           <p>VIP会员</p>
       </li>
       <li @click="Freeclass">
           <img src="./../../assets/zhy/images/icon1.png" alt="">
           <p>免费好课</p>
       </li>
       <li>
           <img src="./../../assets/zhy/images/icon2.png" alt="">
           <p>帮我选课</p>
       </li>
       <li  @click="Class">
           <img src="./../../assets/zhy/images/icon3.png" alt="">
           <p>系列课程</p>
       </li>
       <li>
           <img src="./../../assets/zhy/images/icon4.png" alt="">
           <p>热门活动</p>
       </li>
   </ul>
  </div>
</template>

<script>
export default {
  name: "Icon",
  data() {
    return {
      msg: "hi",
    };
  },
  methods:{
    VIP(){
      this.$router.push('/vip')
    },
    Freeclass(){
      this.$router.push('/freeclass')
    },
    Class(){
      this.$router.push('/class')
    }
  }
};
</script>

<style scoped>

.icon{
  height: 1rem;
}
.icon ul{
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.icon ul li{
  width: .5rem;
  text-align: center;
}
.icon ul li img{
  margin-top: .05rem;
  display: block;
  width: 100%;
  height: 100%;
}
.icon ul li p{
  font-size: .12rem;
  color: #333436;
}

</style>

